import React, { Component } from 'react';
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
import App from './App';
import Layout from './layout/Layout';
import Main from './layout/main/Main';
import NoMatch from './pages/NoMatch';
import Login from './pages/Login';
import Buttons from './pages/ui/Buttons';
import Modals from './pages/ui/Modals';
import Loading from './pages/ui/Loading';
import Notice from './pages/ui/Notice';
import Messages from './pages/ui/Messages';
import Tabs from './pages/ui/Tabs';
import Gallery from './pages/ui/Gallery';
import Carousels from './pages/ui/Carousels';
import Rich from './pages/rich/';
import Logins from './pages/form/Logins';
import Regist from './pages/form/Regist';
import Basic from './pages/table/Basic';
import High from './pages/table/High';
import City from './pages/city/';
import Order from './pages/order/';
import Common from './Common';
import OrderDetail from './pages/order/Detail';

export default class Router extends Component {
  render() {
    return (
      <HashRouter>
        <App>
          <Switch>
            <Route path="/login" component={Login} />
            <Route
              path="/common"
              render={() => (
                <Common>
                  <Route
                    path="/common/order/detail/:orderId"
                    component={OrderDetail}
                  />
                </Common>
              )}
            />
            <Route
              path="/"
              render={() => {
                return (
                  <Layout>
                    <Switch>
                      <Redirect exact from="/" to="/home" />
                      <Route path="/home" component={Main} />
                      <Route path="/ui/buttons" component={Buttons} />
                      <Route path="/ui/modals" component={Modals} />
                      <Route path="/ui/loadings" component={Loading} />
                      <Route path="/ui/notification" component={Notice} />
                      <Route path="/ui/messages" component={Messages} />
                      <Route path="/ui/tabs" component={Tabs} />
                      <Route path="/ui/gallery" component={Gallery} />
                      <Route path="/ui/carousel" component={Carousels} />
                      <Route path="/form/login" component={Logins} />
                      <Route path="/form/reg" component={Regist} />
                      <Route path="/table/basic" component={Basic} />
                      <Route path="/table/high" component={High} />
                      <Route path="/city" component={City} />
                      <Route path="/order" component={Order} />
                      <Route path="/rich" component={Rich} />
                      <Route component={NoMatch} />
                    </Switch>
                  </Layout>
                );
              }}
            />
            {/* 404 */}
            {/* <Route component={NoMatch} /> */}
          </Switch>
        </App>
      </HashRouter>
    );
  }
}
